<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>我的订单</title>
		<%@ include file="/WEB-INF/views/modules/marketHeader.jsp"%>
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/IDH/css/myAccount.css" />
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/jq-address/css/select2.css" />
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/jq-address/css/common.css" />

		<script type="text/javascript" src="${ctxStatic}/kkpager-master/src/kkpager.min.js"></script>
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/kkpager-master/src/kkpager_blue.css" />
	</head>

	<body>
	
		
		<!-- 取消订单 开始 -->
		<div class="modal fade" id="cancelOrder" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title" id="myModalLabel">请您确认是否要取消订单！</h4>
					</div>
					<div class="modal-body">
						<div class="col-xs-12">
							<div class="row">
								<form id="cancelOrderForm" class="form-horizontal " action="" method="post">
									<input type="hidden" name="cancelId" id="cancelId" value=""/>
									<div class="form-group margin_bottom">
										<div class="col-lg-12  col-xs-12">取消说明 ：</div>
									</div>
									<div class="form-group margin_bottom">
										<div class="col-xs-12">
											<textarea name="cancelReason" id="cancelReason" cols="30" rows="10"></textarea>
										</div>
									</div>
									<div class="form-group text-center">
										<button type="button" class="btn btn-primary btn_yes" onclick="cancelOrder('${order.id }');">确定</button>
										<button type="button"  class="btn btn-default btn_cancel" data-dismiss="modal">取消</button>
									</div>
		                        </form>
							</div>
						</div>
                    </div>
                    <div class="modal-footer"></div>
				</div>
			</div>
		</div>
		<!-- 取消订单 结束 -->
		
		<!-- 申请退款 开始 -->
		<div class="modal fade" id="refundOrder" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title" id="myModalLabel">请您确认是否要申请退款！</h4>
					</div>
					<div class="modal-body">
						<div class="col-xs-12">
							<div class="row">
								<form id="refundOrderForm" class="form-horizontal " action="" method="post">
									<input type="hidden" name="refundId" id="refundId" value=""/>
									<div class="form-group margin_bottom">
										<div class="col-lg-12  col-xs-12">退款原因说明 ：</div>
									</div>
									<div class="form-group margin_bottom">
										<div class="col-xs-12">
											<textarea name="refundReason" id="refundReason" cols="30" rows="10">${order.refundReason }</textarea>
										</div>
									</div>
									<div class="form-group text-center">
										<button type="button" class="btn btn-primary btn_yes" onclick="refundOrder('${order.id }');">确定</button>
										<button type="button"  class="btn btn-default btn_cancel" data-dismiss="modal">取消</button>
									</div>
		                        </form>
							</div>
						</div>
                    </div>
                    <div class="modal-footer"></div>
				</div>
			</div>
		</div>
		<!-- 申请退款 结束 -->
		<!--pc content start-->
		<section class="container content" id="container">
			<div class="col-lg-10 col-xs-12">
				<div class="row">
					<ul class="nav nav-tabs" role="tablist" id="myTab">
						<li role="presentation">
							<a href="${ctxf}/userfront/myAccount.html" >我的账户</a>
						</li>
						<li role="presentation" class="active">
							<a href="${ctxf}/userfront/toOrder" class="active">我的订单</a>
						</li>
						<li role="presentation">
							<a href="${ctxf}/userfront/toAddress2">收货管理</a>
						</li>
					</ul>	
					<div class="tab-content">
						<!-- 我的订单 -->
						<div role="tabpanel" class="tab-pane active" id="profile">
							<div class="orderContent">
								<div class="order_list">
									<c:forEach items="${page.list }" var="order">
									    <div class="order_list_1" >
									        <div class="order_info">
	                                            <div class="order_info_title">
	                                                <div class="col-lg-9 col-sm-7 col-xs-7">
	                                                	<div class="row">
	                                                		<span class="order_number">订单编号 ： ${order.code}</span>
	                                                		<span class="pull-right hidden-xs">
	                                                			<span class="unit-price">单价</span>
			                                                    <span class="purchase-quantity">数量</span>
	                                                		</span> 
	                                                	</div>
	                                                </div>
	                                                <div class="col-lg-3 col-sm-5 col-xs-5">
	                                                	<div class="row">
	                                                		<span class="order_info_detail">
			                                                    <span class="order_info_date "><fmt:formatDate value="${order.createTime}" pattern="yyyy-MM-dd HH:mm:ss" /></span>
			                                                    <span class="order_info_a hidden-xs"><a href="${ctxf}/shop/order/myOrder/info?orderId=${order.id }">订单详情</a></span>
			                                                	<input type="hidden" name="orderId" id="orderId${order.id }" value="${order.id }"/>
			                                                </span>
	                                                	</div>
	                                                </div>
	                                                <div class="clearBoth"></div>
	                                            </div>
	                                        </div>
	                                        <div class="order_details">
			                                    <ul class="ui_list details col-lg-9 col-sm-9 col-xs-12">
			                                    	<c:set var="sum" value="0"></c:set>
				                                    <c:forEach items="${order.shopOrderInfoList }" var="info">
			                                        	<li class="ui_list_item order_goods col-lg-12 col-xs-12">
				                                        	<a href="${ctxf}/front/product/genProduct/detail?id=${info.productId}">
				                                                <span class="order_goods_pic text-center">
				                                                    <img src="${path }${info.image }"/>
				                                                </span>
				                                                <div class="order_goods_dec">
				                                                    <p class="dec_name">${info.name }</p>
				                                                    <p class="dec_code">商品编号 ：${info.product.code}</p>
				                                                </div>
				                                                <div class="order_goods_price text-right">
				                                                    <span class="goods_price">￥${info.formatPrice }</span>
				                                                    <span class="goods_num">X${info.count }</span>
				                                                </div>
				                                             </a>
				                                        </li>
			                                            <c:set var="sum" value="${sum + info.count }"></c:set>
				                                    </c:forEach>
			                                    </ul>
			                                    <div class="order_bottom col-lg-3 col-sm-3 col-xs-12 text-center">
			                                        <div class="price_line">
			                                            <p class="order_bottom_info_a"><a href="${ctxf}/shop/order/myOrder/info?orderId=${order.id }">订单详情</a></p>
			                                            <p class="delivery text-center">共<span class="goods_order_num">${sum }</span>件商品, 合计</p>
			                                            <p class="phone-pay-price text-right visible-xs-block">${order.formatTotalAmountProduct }</p>
			                                            <p class="pay-price hidden-xs text-center">${order.formatTotalAmountProduct }</p> 
			                                        </div>
			                                        <div class="order_pay">
			                                       		<c:choose>
			                                        		<c:when test="${order.status == '1'}">
			                                        			<a href="${ctxf}/front/pay/showBank2?id=${order.id }"><div class="btn btn-default btn_style_one">支付 </div></a>
			                                        			<a href="javascript:void(0);"><div class="btn btn-default btn_style_two" onclick="showCancelModal('${order.id }');">取消订单 </div></a>
			                                        		</c:when>
			                                        		<c:when test="${order.status == '2'}">
			                                        			<a href="javascript:void(0);"><div class="btn btn-default btn_style_two" disabled="disabled">已付款</div></a>
			                                        			<a href="javascript:void(0);"><div class="btn btn-default btn_style_two" onclick="showRefundModal('${order.id }');">申请退款 </div></a>
			                                        		</c:when>
			                                        		<c:when test="${order.status == '3'}">
			                                        			<a href="javascript:void(0);"><div class="btn btn-default btn_style_one">待发货 </div></a>
			                                        		</c:when>
			                                        		<c:when test="${order.status == '4'}">
			                                        			<a href="${ctxf}/shop/order/myOrder/info?orderId=${order.id }"><div class="btn btn-default btn_style_one">已发货 </div></a>
			                                        			<a href="javascript:void(0);"><div class="btn btn-default btn_style_two" onclick="ConfirmTheGoods('${order.id }');">确认收货</div></a>
			                                        		</c:when>
			                                        		<c:when test="${order.status == '5'}">
			                                        			<div class="btn btn-default btn_style_one">交易完成 </div>
			                                        		</c:when>
			                                        		<c:when test="${order.status == '6'}">
			                                        			<a href="javascript:void(0);"><div class="btn btn-default btn_style_two" disabled="disabled">订单已取消 </div></a>
			                                        			<a href="javascript:void(0);" onclick="deleteOrder('${order.id }')"><div class="btn btn-default btn_style_two">删除订单 </div></a>
			                                        		</c:when>
			                                        		<c:when test="${order.status == '7'}">
			                                        			<a href="javascript:void(0);"><div class="btn btn-default btn_style_two" disabled="disabled">申请退款中</div></a>
			                                        		</c:when>
			                                        		<c:when test="${order.status == '8'}">
			                                        			<a href="javascript:void(0);"><div class="btn btn-default btn_style_two" disabled="disabled">申请退款被驳回</div></a>
			                                        			<a href="javascript:void(0);"><div class="btn btn-default btn_style_two" onclick="showRefundModal('${order.id }');">申请退款 </div></a>
			                                        		</c:when>
			                                        		<c:when test="${order.status == '9'}">
			                                        			<a href="javascript:void(0);"><div class="btn btn-default btn_style_two" disabled="disabled">订单已取消 </div></a>
			                                        		</c:when>
			                                        	</c:choose>
			                                        </div>
			                                    </div>
			                                </div>
			                                <div class="clearBoth"></div>
									    </div>
									</c:forEach>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</section>
		<section class="container ${empty page ? 'hide': '' }">
			<div class="col-xs-12">
				<div class="row">
					<div id="kkpager"></div>
				</div>
			</div>
		</section>
        <!--pc content end-->

		<!--footer start-->
		<%@ include file="/WEB-INF/views/modules/marketFooter.jsp"%>
        <!--footer end-->

	</body>
	<script src="${ctxStatic}/jq-address/js/select2.js" type="text/javascript" charset="utf-8"></script>
	<script src="${ctxStatic}/jq-address/js/location.js" type="text/javascript" charset="utf-8"></script>
	<script src="${ctxStatic}/jq-address/js/area.js" type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript">
		$(document).ready(function() {
			
			//生成分页控件  
			kkpager.generPageHtml({
				pno : '${page.pageNo}',
				mode : 'click', //设置为click模式
				total : '${page.last}',  //总页码  
				//总数据条数  
				totalRecords : '${page.count}',
				//点击页码、页码输入框跳转、以及首页、下一页等按钮都会调用click
				//适用于不刷新页面，比如ajax
				click : function(n){
					queryPage(n);
			        //处理完后可以手动条用selectPage进行页码选中切换
			        this.selectPage(n);
			    },
			    //getHref是在click模式下链接算法，一般不需要配置，默认代码如下
			    getHref : function(n){
			        return '#';
			    }

			});
			
			function queryPage(page) {
				$("#pageNo").val(page);
				$("#searchForm").attr("action","${ctxf}/userfront/toOrder")
				$("#searchForm").submit();
			}	
			
			$('#myModal').modal({
				backdrop: 'static',
				keyboard: false,
				show: false
			});
			$('#example').tooltip('show');
		});
		
		/* pc 添加地址 change 事件 开始 */
		function getPrive(){
			
			$('#province').val($('#select2-chosen-1').html());
			
		}
		function getCity(){
			
			$('#city').val($('#select2-chosen-2').html());
			
		}
		function getTown(){
			
			$('#countyTown').val($('#select2-chosen-3').html());
		
		}
		/* pc 添加地址 change 事件结束*/
		
		/* 移动端添加地址 change 事件 开始 */
		function getPrivePhone(){
			
			$('#province').val($('#select2-chosen-4').html());
			
		}
		function getCityPhone(){
			
			$('#city').val($('#select2-chosen-5').html());
			
		}
		function getTownPhone(){
			
			$('#countyTown').val($('#select2-chosen-6').html());
		
		}

		/* 移动端添加地址 change 事件 结束 */
		
		
		function addressCheck(){
		
			$("#ress").val("false");
			
		}
		
		/* 移动端点击     添加地址  */
		$('.p_new_address_model').click(function() {
			$('.address_form_list').css({"display":"none"});
			$(".p_add_address").css({"display":"block"});
		});
		
		/* 移动端点击     取消添加地址  */
		function addressCancel(){
			$('.address_form_list').css({"display":"block"});
			$(".p_add_address").css({"display":"none"});
		}
		
		
		$(function() {
			$('#myModal').modal({
				backdrop: 'static',
				keyboard: false,
				show: false
			});
		});
		
		$('.new_address_model').click(function() {
			$('#myModal').modal("show");
		})
		
		/* 新增地址事件 */
		function addressSave(){
			if($('#province').val() == "" || $('#province').val() == "省份"){
				toastr.error('请选择省份！',{timeOut: 5000});
				return false;
			}else if($('#city').val() == "" || $('#city').val() == "地级市"){
				toastr.error('请选择市！',{timeOut: 5000});
				return false;
			}else if($('#countyTown').val() == "" || $('#countyTown').val() == "市、县、区"){
				toastr.error('请选择区！',{timeOut: 5000});
				return false;
			}else{
				$("#detail").val($("#p_detail").val());
				$("#df").submit();
			}
		}
		
		
		
		
		/*pc端  修改地址事件 */
		function changeAddress(addressId){
			
			$('#myModal').modal("show");
			
			$.ajax({
				type: "POST",
				url: "${ctxf}/userfront/getAddress?id="+addressId,
				dataType: "json",
				async: true,
				beforeSend: function(XHR) {
					
				},
				success: function(data) {
					
					$("#addId").val(data.id);
					$('#province').val(data.province);
					$('#countyTown').val(data.countyTown)
					$('#city').val(data.city);
					$("#detail").val(data.detail);
					$("#select2-chosen-1").html(data.province);
					$("#select2-chosen-2").html(data.city);
					$("#select2-chosen-3").html(data.countyTown);
				}
			});
		}
		
		/*phone端  修改地址事件 */
		function phoneChangeAddress(addressId){
			
			$('.address_form_list').css({"display":"none"});
			$(".p_add_address").css({"display":"block"});
			
			$.ajax({
				type: "POST",
				url: "${ctxf}/userfront/getAddress?id="+addressId,
				dataType: "json",
				async: true,
				beforeSend: function(XHR) {
					
				},
				success: function(data) {
					$("#addId").val(data.id);
					$('#province').val(data.province);
					$('#countyTown').val(data.countyTown)
					$('#city').val(data.city);
					$("#detail").val(data.detail);
					$("#select2-chosen-4").html(data.province);
					$("#select2-chosen-5").html(data.city);
					$("#select2-chosen-6").html(data.countyTown);
				}
			});
		}
				
		function validateCode(){
			var email = $("#verifyEmailNum").val();
			var telNum = $("#verifyphoneNum").val();
			var url;
			if(email != "undefined" && email!=""&& email!=null){
				 url="${ctxf}/account/bindMail?email="+email
			} 
			 if(telNum != "undefined" && telNum!=""&& telNum!=null){
				url="${ctxf}/account/getVerificationCode?telNum="+telNum;
			} 
			$.ajax({

			     type: 'POST',
			
			     url: url,
			  
			
			});
		}
		
		//取消订单
		function showCancelModal(id){
			$("#cancelId").val(id);
			
			$('#cancelOrder').modal("show");
		}
		
		
		function showRefundModal(id) {
			$("#refundId").val(id);
			$('#refundOrder').modal("show");
		}
		/* 
			reason:取消理由
			status:状态
			id：订单id
		*/
		function cancelOrder(){
			$.ajax({
				type:"POST",
				url:"${ctxf}/shop/order/myOrder/edit",
				data:{reason:$("#cancelReason").val(),status:"6",id:$("#cancelId").val()},
				async:false,
				success:function(msg){
					$('#cancelOrder').modal("hide");
					$("#cancelReason").val("");
					if(msg=="success"){
						toastr.success('订单取消成功！',{timeOut: 1000});
						setTimeout(function(){
							window.location.reload();
						},1000);
					}else{
						toastr.error('订单取消失败！',{timeOut: 1000});
					}
				}
			});
		}
		
		function refundOrder(id){
			$.ajax({
				type:"POST",
				url:"${ctxf}/shop/order/myOrder/forRefund",
				data:{reason:$("#refundReason").val(),id:$("#refundId").val()},
				async:false,
				success:function(msg){
					$('#refundOrder').modal("hide");
					$("#refundReason").val("");
					if(msg=="success"){
						toastr.success('申请退款处理中，请耐心等候',{timeOut: 1000});
						setTimeout(function(){
							window.location.reload();
						},1000);
					}else{
						toastr.error('申请退款失败！',{timeOut: 1000});
					}
				}
			});
		}
		
		//已收货
		function ConfirmTheGoods(id){
			$.ajax({
				type:"POST",
				url:"${ctxf}/shop/order/myOrder/edit",
				data:{status:"5",id:$("#orderId" + id).val()},
				async:false,
				success:function(msg){
					if(msg=="success"){
						toastr.success('确认成功！',{timeOut: 1000});
						setTimeout(function(){
							window.location.reload();
						},1000); 
					}else{
						toastr.error('确认失败！',{timeOut: 1000});
					}
				}
			});
		}
		
		//删除取消的订单
		function  deleteOrder(id){
			layer.confirm('您确定要删除该订单吗？', {
				icon: 3,
				btn: ['确定', '取消'] //按钮
			}, function() {
				$.ajax({
					type:"POST",
					url:"${ctxf}/shop/order/myOrder/delete",
					data:{id:$("#orderId" + id).val()},
					async:false,
					success:function(msg){
						if(msg=="success"){
							/* toastr.success('订单删除成功！',{timeOut: 1000}); */
							layer.msg('订单已删除', {icon: 1});
							setTimeout(function(){
								window.location.reload();
							},1000); 
						}else{
							toastr.error('订单删除失败！',{timeOut: 1000});
						}
					}
				});
			}, function() {
				/* layer.msg('也可以这样', {
					time: 20000, //20s后自动关闭
					btn: ['明白了', '知道了']
				}); */
			});
		}
		
		//页面最小高度
		var height = $(window).height() - 241;
		$("#container").css("min-height",height);
	</script>

</html>